import { Cascader, CascaderProps, DefaultOptionType, Tag } from 'antd';
import React, { useEffect } from 'react';

interface Props extends CascaderProps {}

const index = ({ options, ...props }: CascaderProps) => {
  const renderLabel = (label: string, isRecommend?: boolean, isConnect?: boolean) => (
    <span>
      {label}
      {isRecommend && (
        <div className="ml-1 inline-flex bg-@success-color-light px-2 text-xs leading-5 text-@success-color">
          推荐
        </div>
      )}
      {isConnect === false && (
        <div className="ml-1 inline-flex items-center bg-@error-color-light px-2 text-xs leading-5 text-@error-color">
          <div className="mr-2 inline-block h-[6px] w-[6px] rounded-full bg-@error-color" />
          失效
        </div>
      )}
    </span>
  );

  const processOptions = (options: any): any[] =>
    options?.map((option) => ({
      ...option,
      _originLabel: option.label,
      label: renderLabel(option.label, option.isRecommend, option.isConnect),
      children: option.children ? processOptions(option.children) : undefined,
    }));

  return <Cascader options={processOptions(options)} {...props} />;
};

export default index;
